<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>评论列表</title>
    <%- include common  %>
    <style>
    #updatecontent{
        width:100% !important;
    }
    .xheLayout{
        width:100% !important;
    }
    </style>
</head>
<body>
    <%- include("head",{title:"mlist",username}) %>
    <div class="container-fluid">
        <div class="container">
            <h2 class="text-primary h2"> 评论列表 </h2>

            <div class="row">
                <div class="col-md-4 col-sm-6 col-xs-12">
                    <div class="form-group" >
                        <select class="form-control" data-page="<%- page %>" id="pageSizeSelect" >
                            <option value="10"  <%- pageSize == 10?'selected':'' %>  >每条10条</option>
                            <option value="15"  <%- pageSize == 15?'selected':'' %>  >每条15条</option>
                            <option value="20"  <%- pageSize == 20?'selected':'' %> >每条20条</option>
                            <option value="30" <%- pageSize == 30?'selected':'' %>  >每条30条</option>
                        </select>
                    </div>
                </div>
            </div>

            <table class="table table-bordered table-hover table-striped table-condensed ">
                <thead>
                    <tr class="danger text-center">
                        <td>#</td>
                        <td>评论标题</td>
                        <td>评论内容</td>
                        <td>评论人</td>
                        <td>评论时间</td>
                        <td>评论电影</td>
                        <td>电影缩略图</td>
                        <td>操作1</td>
                        <td>操作2</td>
                    </tr>
                </thead>
                <tbody>
                <%    if(result.length>0){   %>
                <%        result.forEach((item,index)=>{  %>
                                <tr class=" text-center">
                                    <td><%- index+1 %></td>
                                    <td><a style="display: block;width:100px;word-break: break-all;" href="/comment/detail?_id=<%- item._id%>  "> <%- item.title %> </a></td>
                                    <td>
                                        <div style="width:220px;word-break: break-all;overflow: hidden;">
                                            <%- item.content %>
                                        </div>
                                    </td>
                                    <td >
                                        <a href="/comment/plist?author=<%-item.author%>" class="<%- item.author == username ? 'text-danger':'' %>">  <%- item.author %> </a>
                                    </td>
                                    <td><%- item.time %></td>
                                    <td>
                                        <a href="/comment/mvdetail?mid=<%- item.mid %>"> <%- item.movie.title %> </a>
                                    </td>
                                    <td>
                                        <img style="width:120px;height:120px;" src="<%-  item.movie.images.large.replace(/img7/,'img3') %>  " alt="">
                                    </td>
                                    <td>
                                        <button onclick="getDelId('<%- item._id %>')" data-toggle="modal" data-target="#delbox"  class="btn btn-danger"   <%- item.author==username ?'':'disabled' %> > 删除</button>
                                    </td>
                                    <td>
                                     <%   if(item.author==username){  %>
                                            <button data-item='<%- JSON.stringify(item) %>'  onclick='getUpdateData("<%- item %>",this)'  class="btn btn-primary" data-toggle="modal" data-target="#updatebox" >修改</button>
                                      <%  }   %>
                                    </td>
                                </tr>
                <%        }) %>
                    <tr>
                        <td colspan="9">
                            <nav aria-label="Page navigation">
                                <ul class="pagination">
                                    <li class="<%- page<=1?'disabled':''  %>">
                                    <a href="/comment/mlist?pageSize=<%-pageSize %>&page=<%- page-1 %>" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                    </li>
                                    <li class="<%- page-2<=0?'disabled':''  %>"><a href="/comment/mlist?pageSize=<%-pageSize %>&page=<%- page-2 %>">  <%- page-2  %></a></li>
                                    
                                    <li class="<%- page-1<=0?'disabled':''  %>"  ><a href="/comment/mlist?pageSize=<%-pageSize %>&page=<%- page-1 %>"> <%- page-1 %></a></li>
                                    <li><a href="/comment/mlist?page=<%- page %>"> <%- page %>  </a></li>
                                    <li class="<%- page+1>totalPage?'disabled':''  %>"  ><a href="/comment/mlist?pageSize=<%-pageSize %>&page=<%- page+1 %>" > <%- page+1 %> </a></li>
                                    <li  class="<%- page+2>totalPage?'disabled':''  %>"><a href="/comment/mlist?pageSize=<%-pageSize %>&page=<%- page+2 %>" > <%- page+2 %> </a></li>
                                    <li class="<%- page>=totalPage?'disabled':''  %>"  >
                                    <a href="/comment/mlist?pageSize=<%-pageSize %>&page=<%- page+1 %>" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                    </li>
                                    <li>
                                        <p>第 <%- page%> 页 / 共 <%- totalPage %> 页  </p>
                                        <p>每页 <%- pageSize %> 条 / 共 <%- total %> 条  </p>
                                    </li>
                                </ul>
                            </nav>
                        </td>
                    </tr>
                 <%   }else{  %>
                        <tr>
                            <td colspan="9">
                                暂无数据...
                            </td>
                        </tr>
                <%    }   %>
                </tbody>
            </table>
        </div>


        <div class="modal fade" tabindex="-1" role="dialog" id="delbox">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">删除提示</h4>
                </div>
                <div class="modal-body">
                    <p>亲,你确定要删除吗 &hellip;</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-info" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" onclick="confirmdel()">确定删除</button>
                </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->


        <div class="modal fade" tabindex="-1" role="dialog" id="updatebox">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">修改评论 / <span id="uauthor">  </span></h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group" >
                            <label for="title">评论标题</label>
                            <input type="text" name="title" class="form-control" id="updatetitle" placeholder="Enter title">
                        </div>
                        <div class="form-group" style="display: flex;flex-direction: column;">
                            <label for="content">评论内容</label>
                            <textarea rows="10" cols="20" name="content"  class="form-control" id="updatecontent" placeholder="Enter content"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-info" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-danger" onclick="confirmupdate()">确定修改</button>
                    </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div><!-- /.modal -->
    </div>
    <script>
        $("#pageSizeSelect").on("change",function(){
            console.log($(this).val())
            var page = $(this).attr("data-page")
            location.href = "/comment/mlist?page="+page+"&pageSize="+$(this).val();
        })


        var delId = null;

        function getDelId(id){
            delId = id   // 作用域的优先级 
            // console.log(delId)
        }

        function confirmdel(){
            console.log(delId)

            // $.ajax 
            $.ajax({
                url:"/comment/delonecomment",
                type:"POST",
                data:{
                    _id:delId
                },
                success(res){
                    if(res.type){
                        // 删除成功
                        window.location.reload()
                    }
                }
            })
        }
        var updatedata=null
        function getUpdateData(item,that){
            var data = JSON.parse( that.getAttribute("data-item"))
            console.log(data)
            updatedata =data
            $("#uauthor").html(data.author)
            $("#updatetitle").val(data.title)
            $("#updatecontent").val(data.content)
        }

        function confirmupdate(){
             $.ajax({
                 url:"/comment/updateonecomment",
                 type:"POST",
                 data:{
                     _id:updatedata._id,
                     title:$("#updatetitle").val(),
                     content:$("#updatecontent").val()
                 },
                 success(res){
                     if(res.type){
                        //  修改成功 
                        window.location.reload()
                     }
                 }
             })
        }
    </script>
    <script>
        // $("#content").xheditor(); // 简单的实例化 
        $(pageInit);
        function pageInit(){
            $.extend(XHEDITOR.settings,{shortcuts:{"ctrl+enter":submitForm}});
            // $("#ele").xheditor();
            $("#updatecontent").xheditor({   //初始化 富文件编辑框
                html5Upload:false,
                upMultiple:"1",

                upLinkRrl:"upload.html",
                upLinkExt:"zip,rar,txt",

                upImgUrl:"/comment/uploadImg",   // 图片上传的服务器  POST
                upImgExt:"jpg,jpeg,gif,png",

                upFlashUrl:"upload.php",
                upFlashExt:"swf",

                upMediaUrl:"upload.php",
                upMediaExt:"wmv,avi,wma,mp3,mid"

            });
        };

        function insertUpload(arrMsg){
            console.log(arrMsg);
            var i,msg;
            for(var i=0;i<arrMsg.length;i++){
                msg=arrMsg[i];
                console.log(msg);
                $("#uploadList").append('<option value="'+msg.id+'">'+msg.localname+'</option>')
            }
        };

        function submitForm(){
            $("#frmDemo").submit();
        }

    </script>
    <%- include foot %>
</body>
</html>